<template>
  <div class="home">
    <!-- <el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>&ensp;
  <el-link type="primary">主要链接</el-link>&ensp;
  <el-link type="success">成功链接</el-link>&ensp;
  <el-link type="warning">警告链接</el-link>&ensp;
  <el-link type="danger">危险链接</el-link>&ensp;
  <el-link type="info">信息链接</el-link>&ensp;
</div>
<h1> {{ $store.state.num }}</h1><button @click="jia">+</button>
<h1>666{{ num }}</h1>
<h1>{{ num1 }}</h1> -->
    <!-- <SubView></SubView> -->
    <!-- {{ num }} -->
    <!-- <AddView></AddView> -->
    <div>
      名称<input type="text" v-model="name" /><br />
      类型<input type="text" v-model="type" /><br />
      价格<input type="text" v-model="price" /><br />
      介绍<input type="text" v-model="description" /><br />
      库存<input type="text" v-model="stock" /><br />
      <button @click="add">添加</button><br />
      <input type="text" placeholder="输入ID进行搜索" v-model="sou" /><button
        @click="search(sou)"
      >
        搜索
      </button>
    </div>
    <table border="">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>类型</th>
          <th>价格</th>
          <th>介绍</th>
          <th>库存</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in arr" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.description }}</td>
          <td>{{ item.stock }}</td>
          <td>
            <button @click="del(item.id)">删除</button
            ><button @click="show(item.id)">修改</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-show="is">
      名称<input type="text" v-model="new_name" /><br />
      类型<input type="text" v-model="new_type" /><br />
      价格<input type="text" v-model="new_price" /><br />
      介绍<input type="text" v-model="new_description" /><br />
      库存<input type="text" v-model="new_stock" /><br />
      <button @click="is = false">取消</button
      ><button @click="update">确定</button>
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapState } from "vuex";
// import AddView from "./AddView.vue";
// import SubView from "./SubView.vue";
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      type: "",
      price: "",
      description: "",
      stock: "",
      sou: "",
      arr: [],
      id: "",
      new_name: "",
      new_type: "",
      new_price: "",
      new_description: "",
      new_stock: "",
      is: false,
    };
  },
  mounted() {
    this.apply();
    // axios({
    //   url: "http://apis.juhe.cn/fapig/sudoku/generate",
    //   method: "get",
    //   data: {
    //     key: "ef2fd9f9e92936158253b3b9bb431dc6",
    //   },
    // })
    //   .then((a) => {
    //     console.log(a);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
  computed: {
    // ...mapState({num:"num"}),
    // ...mapState(["num"]),
    // ...mapGetters(["num1"]),
  },
  methods: {
    apply() {
      axios
        .get("https://liu.zzgoodqc.cn/teas")
        .then((a) => {
          this.arr = a.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // jia() {
    //   this.$store.dispatch("jia", 10);
    // },
    add() {
      axios({
        url: "https://liu.zzgoodqc.cn/teas",
        method: "post",
        data: {
          name: this.name,
          type: this.type,
          price: this.price,
          description: this.description,
          stock: this.stock,
        },
      })
        .then(() => {
          this.apply();
          this.name = "";
          this.type = "";
          this.price = "";
          this.description = "";
          this.stock = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    del(id) {
      axios({
        url: `https://liu.zzgoodqc.cn/teas/${id}`,
        method: "DELETE",
      })
        .then(() => {
          this.apply();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(id) {
      axios
        .get(`https://liu.zzgoodqc.cn/teas/${id}`)
        .then((a) => {
          this.arr = [];
          this.arr.push(a.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show(id) {
      this.id = id;
      this.is = true;
    },
    update() {
      axios({
        url: `https://liu.zzgoodqc.cn/teas/${this.id}`,
        method: "put",
        data: {
          name: this.new_name,
          type: this.new_type,
          price: this.new_price,
          description: this.new_description,
          stock: this.new_stock,
        },
      })
        .then(() => {
          this.apply();
          this.is = false;
          this.new_name = "";
          this.new_price = "";
          this.new_description = "";
          this.new_type = "";
          this.new_stock = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    // AddView,
    // SubView,
  },
};
</script>
<style lang='less' scoped>
// .el-row {
//   margin-bottom: 20px;
//   &:last-child {
//     margin-bottom: 0;
//   }
// }
// .el-col {
//   border-radius: 4px;
// }
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
// .grid-content {
//   border-radius: 4px;
//   min-height: 36px;
// }
// .row-bg {
//   padding: 10px 0;
//   background-color: #f9fafc;
// }
</style>